<template>
  <div class="action-bar">
    <!-- 视图切换 -->
    <div class="view-toggle">
      <el-radio-group v-model="localViewMode" size="small" class="view-radio">
        <el-radio-button label="grid">
          <el-icon><Grid /></el-icon>
          网格视图
        </el-radio-button>
        <el-radio-button label="list">
          <el-icon><Menu /></el-icon>
          列表视图
        </el-radio-button>
      </el-radio-group>
    </div>

    <!-- 操作按钮 -->
    <div class="action-buttons">
      <el-tooltip content="刷新" placement="top">
        <el-button 
          type="primary" 
          :icon="Refresh" 
          circle 
          @click="$emit('refresh')"
          class="action-btn"
          :loading="loading"
        />
      </el-tooltip>
      
      <el-tooltip content="上传文件" placement="top" v-if="canUpload">
        <el-button 
          type="success" 
          :icon="Upload" 
          circle 
          @click="$emit('show-upload-dialog')"
          class="action-btn"
        />
      </el-tooltip>
      
      <el-tooltip content="新建文件夹" placement="top" v-if="canCreateFolder">
        <el-button 
          type="info" 
          :icon="FolderAdd" 
          circle 
          @click="$emit('show-create-folder-dialog')"
          class="action-btn"
        />
      </el-tooltip>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue';
import { Grid, Menu, Refresh, Upload, FolderAdd } from '@element-plus/icons-vue';

const props = defineProps({
  viewMode: {
    type: String,
    default: 'grid'
  },
  loading: {
    type: Boolean,
    default: false
  },
  canUpload: {
    type: Boolean,
    default: false
  },
  canCreateFolder: {
    type: Boolean,
    default: false
  }
});

const emit = defineEmits([
  'refresh', 
  'show-upload-dialog', 
  'show-create-folder-dialog', 
  'update:viewMode'
]);

// 本地视图模式，用于双向绑定
const localViewMode = computed({
  get: () => props.viewMode,
  set: (value) => emit('update:viewMode', value)
});
</script>

<style scoped>
.action-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.view-toggle {
  display: flex;
  align-items: center;
}

.view-radio :deep(.el-radio-button__inner) {
  display: flex;
  align-items: center;
  gap: 4px;
}

.action-buttons {
  display: flex;
  gap: 8px;
}

.action-btn {
  transition: all 0.2s;
}

/* 响应式布局 */
@media (max-width: 768px) {
  .action-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}
</style> 